/**
 * Created by wangzilong on 2017/4/11.
 */
import React, { Component,PropTypes } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    TouchableOpacity,
    TextInput,
    ListView,
    Modal,
    Platform,
    Animated,
    TouchableWithoutFeedback
} from 'react-native';
import Echarts from 'native-echarts';
import ImageWrapper from '../components/ImageWrapper';
import NavigationBar from '../components/NavigationBar';
import AddList from './AddList';
import LeftPage from './LeftPage';
import StorageUser from '../lib/plugins/StorageUser';
var Dimensions = require('Dimensions');
const { width, height } = Dimensions.get('window');

export default class Info extends Component{
    constructor(props) {
        super(props);
        $this = this;
        this.token = '';
        this.userId = '';
        this.shopList = [];
        this.state = {
            infoList:[
                        {name:'今日预约',number:'0'},
                        {name:'今日销量',number:'0'},
                        {name:'代付款',number:'0'},
                        {name:'代发货',number:'0'},
                        {name:'昨日访问量',number:'0'},
                        {name:'昨日成交金额',number:'0'},
                        {name:'账户余额',number:'0'},
                        {name:'出售中',number:'0'},
                        {name:'发起任务',number:'0'}
                    ],
            dateList:['1月','2月','3月','4月','5月','6月'],
            shopName:'',
            shopId:'',
            shopImage:'',
        };
        
    }
    componentDidMount() {
        var $this = this;
        StorageUser._getUser()
            .then(data=>{
                if(data.token){
                    $this.token = data.token;
                }
                if(data.userId){
                    $this.userId = data.userId;
                }
                if(data.infoList){
                    $this.setState({
                        infoList:data.infoList
                    })
                }
                if(data.shopName){
                    $this.setState({
                        shopName:data.shopName
                    })
                }
                if(data.shopList){
                    $this.shopList = data.shopList;
                }
                if(data.shopImage){
                    $this.setState({
                        shopImage:data.shopImage
                    })
                }
                // InteractionManager.runAfterInteractions(() => {
                //     $this.getData();
                // });
                              
            }).catch(err=> {
                console.log(err)
            });
    }


    renderItem(){
        return(
            this.state.infoList.map((item,i)=>{
                return(
                    <View key={i}>
                        <InfoItem style={i%2==0?styles.hasColor:styles.noColor} num={item.number} text={item.name}/>
                    </View>
                )
            })
        )
    }

    renderEcharts(){
        const option = {
            title: {
                text: ''
            },
            tooltip: {},
            legend: {
                data:['销量','收入'],
                top:10,
                bottom:20
            },
            xAxis: {
                data: this.state.dateList
            },
            yAxis: {},
            series: [
                {name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]},
                {name: '收入',
                type: 'bar',
                data: [50, 200, 360, 100, 100, 200]},
            ],
            color:['#FF7F50','#87CEFA'],
            backgroundColor:'#EFEFF4'
        };
        return(
           <Echarts option={option} height={300}/>
        )
    }

    render(){
        return (
            <View style={styles.container}>
                <NavigationBar 
                    titleText={'日志'} 
                    leftStyle={styles.leftStyle}
                    rightIcon={'explain'}
                    rightStyle={{marginRight:10,width:24,height:24}}/>
                <ScrollView>
                    <View style={{flexDirection:'row',flexWrap:'wrap'}}>
                        {this.renderItem()}
                    </View>
                    <TouchableOpacity onPress={()=>this.goAddList()}>
                        <View style={{justifyContent:'center',alignItems:'center',height:30,backgroundColor:'#C7C7CC',borderRadius:3}}>
                            <Text style={{color:'#fff'}}>添加+</Text>
                        </View>
                    </TouchableOpacity>
                    <View>
                        <View style={{height:40,justifyContent:'center'}}>
                            <Text>店铺排名柱状图</Text>
                        </View>
                        <View>
                            {this.renderEcharts()}
                        </View>
                        <View style={{flexDirection:'row',marginBottom:20}}>
                            <View style={styles.bottomBox}>
                                <Text>今日预约用户(5)</Text>
                            </View>
                            <View style={styles.bottomBox}>
                                <Text>单日店铺排名(第1569位)</Text>
                            </View>
                        </View>
                    </View>
                </ScrollView>
            </View>
        )

    }

    goAddList(){
        var $this = this;
        const {navigate } = this.props.navigation;
        navigate('AddList',{infoList:$this.state.infoList,listItems:(data)=>{
            $this.setState({
                infoList:data
            })
        }})
    }
    showAnimate(){
        const {navigate } = this.props.navigation;
        navigate('LeftPage',{upData:(obj)=>{
            this.setState({
                shopName:obj.shopName,
                shopImage:obj.shopImage
            })
        }})
    }

}
class InfoItem extends Component{
    constructor(props) {
        super(props);
    }
    render(){
        return(
            <View style={[styles.moduleBox,this.props.style]}>
                <View>
                    <Text style={{fontSize:12}}>{this.props.num}</Text>
                </View>
                <View>
                    <Text style={{fontSize:12}}>{this.props.text}</Text>
                </View>
            </View>
        )
    }
}



const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#EFEFF4',
        ...Platform.select({
            ios: {
                marginTop: 20
            },
            android: {
                marginTop:0
            },

        }),
    },
    leftStyle:{
        width:30,
        height:30,
        marginLeft:10,
        ...Platform.select({
            ios: {
                borderRadius:15,
            },
            android: {
                borderRadius:30,
            },

        }),
    },
    moduleBox:{
        width:(width-12)/3,
        marginRight:2,
        marginLeft:2,
        borderWidth:1,
        borderColor:'#D6D6D6',
        borderRadius:3,
        alignItems:'center',
        justifyContent:'center',
        height:50
    },
    hasColor:{
        backgroundColor:'#EFEFF4'
    },
    noColor:{
        backgroundColor:'#fff'
    },
    bottomBox:{
        flex:1,
        justifyContent:'center',
        alignItems:'center'
    },
    icon: {
        width: 26,
        height: 26,
    },
    animateStyle:{
        width:7*width/10,
        height:height,
        position:'absolute',
        top:0,
        zIndex:10000,
        paddingBottom:20
    },
    modalBox:{
        flex:1,
        backgroundColor:'rgba(3,3,3,.7)',
        justifyContent:'center',
        alignItems:'center',
    },
});